<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计数器案例</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="/lib/react.js"></script>
  <script src="/lib/react-dom.js"></script>
  <script src="/lib/babel.js"></script>

  <script type="text/babel">
    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          count: 100,
        };
        this.add = this.add.bind(this);
        this.reduce = this.reduce.bind(this);
      }

      add() {
        const { count } = this.state;
        this.setState({
          count: count + 1,
        });
      }
      reduce() {
        const { count: c } = this.state;
        this.setState({
          count: c - 1,
        });
      }
      render() {
        return (
          <div>
            <div>当前计数{this.state.count}</div>
            <button onClick={this.add}>+1</button>
            <button onClick={this.reduce}>-1</button>
          </div>
        );
      }
    }

    const rootEl = document.querySelector("#app");
    const root = ReactDOM.createRoot(rootEl);
    root.render(<App />);
  </script>
</html>
